<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./../template/testPageTemplate.xhtml">

            <ui:define name="content">
                <f:view beforePhase="#{questionBean.init()}">
                    <h:form>
                        <p:commandButton value="Back to Index" action="./../index.xhtml?faces-redirect=true"/>
                    </h:form>
                    <h:form id ="form" style="margin-top: 20px">
                        <p:dataTable id="questionTable" var="qItem" value="#{questionBean.getqItems()}" widgetVar="questionTable" 
                                     emptyMessage="No question found with given criteria" 
                                     scrollable="true" scrollHeight="350" rowKey="#{qItem.id}"  selection="#{questionBean.selectedQ}" selectionMode="single">

                            <f:facet name="header">
                                <p:outputPanel>
                                    <p:commandButton value="Add Question" actionListener="#{questionBean.clearValue()}" update=":AddForm" oncomplete = "addQuestion.show();"/>
                                    &nbsp;
                                    <p:commandButton value="Edit Question" onclick= "editQuestion.show();"/>
                                    &nbsp;
                                    <p:commandButton value="Delete Question" onclick= "deleteQuestion.show();"/>
                                </p:outputPanel>
                            </f:facet>
                            <p:ajax event="rowSelect"  update=":Editform, :DeleteForm" listener="#{questionBean.updateValue()}"/>
                            <p:column id="codeColumn" filterBy="#{qItem.id}" 
                                      headerText="Index" filterMatchMode="startsWith" style="width: 10%">
                                <h:outputText value="#{qItem.id}" />
                            </p:column>
                            <p:column id="nameColumn" headerText="Question" style="width: 75%">
                                <h:outputText value="#{qItem.question}" />
                            </p:column>
                            <p:column id="typeColumn"  headerText="Type" style="width: 15%">
                                <h:outputText value="#{qItem.type}"/>
                            </p:column>
                        </p:dataTable>
                    </h:form>
                    <h:form id="AddForm">
                        <p:dialog widgetVar="addQuestion" width="800px">
                            <p:panelGrid id="panel" columns="2" style="width: 750px">
                                <h:outputText value="Id"/>
                                <h:inputText value="#{questionBean.qid}" style=" width: 650px;"/> 
                                <h:outputText value="Question"/>
                                <h:inputTextarea value="#{questionBean.question}" style=" width: 650px; height: 300px"/> 
                                <h:outputText value="Type"/>
                                <p:selectOneMenu value="#{questionBean.type}" required="true">  
                                    <f:selectItem itemLabel="Select One" itemValue="" />  
                                    <f:selectItem itemLabel="General Knowledge" itemValue="general" />  
                                    <f:selectItem itemLabel="Estimation" itemValue="estimate" />  
                                </p:selectOneMenu>
                            </p:panelGrid>

                            <p:commandButton value="Add" style="margin-top: 20px" actionListener="#{questionBean.addQuestion()}" update=":form" oncomplete="addQuestion.hide()"/>
                            <p:commandButton value="Cancel" style="margin-top: 20px" onclick="addQuestion.hide();" />  
                        </p:dialog>
                    </h:form>

                    <h:form  id ="Editform">
                        <p:dialog widgetVar="editQuestion" width="800px">
                            <p:panelGrid columns="2" style="margin-top: 20px">
                               <h:outputText value="ID"/>
                                <h:outputText value="#{questionBean.qid}"/>
                                <h:outputText value="Question"/>
                                 <h:inputTextarea value="#{questionBean.question}" style=" width: 650px; height: 300px"/> 
                                <h:outputText value="Description"/>
                                 <p:selectOneMenu value="#{questionBean.type}" required="true">  
                                    <f:selectItem itemLabel="Select One" itemValue="" />  
                                    <f:selectItem itemLabel="General Knowledge" itemValue="general" />  
                                    <f:selectItem itemLabel="Estimation" itemValue="estimate" />  
                                </p:selectOneMenu>
                            </p:panelGrid>
                            <p:commandButton value="Save Changes" actionListener="#{questionBean.editQuesiton()}" update=":form" oncomplete="editQuestion.hide()"/>
                        </p:dialog>
                    </h:form>
                    <h:form id="DeleteForm">
                        <p:dialog widgetVar="deleteQuestion" width="800px">
                            <h:outputText value="Are you sure you want to delete this Question? "/>
                            <p:panelGrid columns="2" style="margin-top: 20px">
                                <h:outputText value="ID"/>
                                <h:outputText value="#{questionBean.qid}"/>
                                <h:outputText value="Question"/>
                                <h:outputText value="#{questionBean.question}"/>
                                <h:outputText value="Description"/>
                                <h:outputText value="#{questionBean.type}"/>
                            </p:panelGrid>
                            <p:commandButton value="Delete" style="margin-top: 20px" actionListener="#{questionBean.deleteQuestion()}" update=":form" oncomplete="deletQuestion.hide()"/>
                            <p:commandButton value="Cancel" style="margin-top: 20px" onclick="deletQuestion.hide();" />  
                        </p:dialog>
                    </h:form>
                </f:view>
            </ui:define>

        </ui:composition>

    </body>
</html>

